JavaScript框架，库和工具似乎比他们的开发人员多出很多。在2018年底，对GitHub的快速搜索显示了 230 万个JavaScript项目。 npm 已经成为世界上最大的模块系统，在 npmjs.com 上有70万个可用包，每个月 ...

宇宙中最重的物质 经过这么多年的发展，JavaScript 早已经不是当年那个不太起眼的脚本语言。如今的 JavaScript 可以说是风光无限，在 Web 前端、移动端、服务端甚至物联网设备上都大展身手，到处都有它的身影。 在 Java ...

背景 传统的优化用户等待的体验 - 白屏使用动画，菊花图，加载进度条等： image.png It can be bad because progress indicators by definition call attention to ...

作为前端，我们每天都在与CSS打交道，那么CSS的原理是什么呢？一、浏览器渲染开篇，我们还是不厌其烦的回顾一下浏览器的渲染过程，先上图： 正如上图所展示的，我们浏览器渲染过程分为了两条主线：其一，HTML Parser 生成的 DOM 树； ...

讲下webpack如何处理css样式文件。 git仓库：webpack-demo 1、新建 进入项目中，在src目录下新建一个styles/header.css文件。 webpack-demo/chapter5 ... |- / ...

发现很多选择器已经忘了叫啥了，借此看一下MDN的文档，本文只是抛砖引玉，记录下阅读过程中的一些新知识，或是当作以后查阅的手册。文档地址 1. 通配选择器 一个星号()就是一个通配选择器.它可以匹配任意类型的HTML元素.在配合其他简单选择 ...

CSS 变量，又称为 CSS 自定义属性，是前端开发中比较新颖的知识点；但是由于很多前端开发人员专注于使用 UI 框架，CSS 反倒变成一个小众知识点了。本文就借次机会复习一下这个知识。 Overview 变量对开发的意义不言而喻：减少重复 ...

还是延续上节的内容，webpack如何处理less、sass这种预编译样式文件。 本节的内容主要是postcss的运用，postcss很强大，我们小试牛刀用它来实现在不同的浏览器中为我们自动添加前缀如-webkit-、-moz-等等以做兼 ...

背景 在 React 项目中使用 CSS 时，如果不使用 CSS in JS 的方案，一般会直接在 JS 文件中导入一个 CSS 文件，比如 import './index.css'，但这样 CSS 会在全局作用域内都有效，所以我们会使用 ...

前言众所周知，图片的加载是前端页面加载性能的优化之一。如果一个页面在加载的时候全部加载当前页面的图片，当图片资源比较多且比较大（质量）的时候会严重影响页面的加载。特别是SPA应用，先加载jsbundle资源，再去加载图片 ...